<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css"/>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			#left-menus{
				height: 300px;
				width: 200px;
				overflow: auto;
				background: #CCCCCC;
				border: 1px solid #9cf;
			}
			#left-menus ul li{
				width: 183px;
				height: 30px;
				line-height: 30px;
				text-indent: 10px;
				margin-bottom: 1px;
				background: white;
				float: left;
			}
			.right-box li.item{
				width: 200px;
				height: 30px;
				border: 1px solid #9cf;
				margin:4px;
			}
		</style>
	</head>
	<body>
		<div id="left-menus">
			<ul>
				<li class="item">菜单1</li>
				<li class="item">菜单2</li>
				<li class="item">菜单3</li>
				<li class="item">菜单4</li>
				<li class="item">菜单5</li>
				<li class="item">菜单6</li>
				<li class="item">菜单7</li>
				<li class="item">菜单8</li>
				<li class="item">菜单9</li>
				<li class="item">菜单0</li>
			</ul>
		</div>
		<div class="right-box">
			<ul>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
				<li class="item"></li>
			</ul>
		</div>
		<script type="text/javascript">
			$(function(){
				 $('#left-menus li.item').draggable({
	                revert:true,
	                proxy:'clone'
	             });
	            
	             $('.right-box li.item').droppable({
	                accept: '.item',
	                onDragEnter:function(){
	                    $(this).addClass('over');
	                },
	                onDragLeave:function(){
	                    $(this).removeClass('over');
	                },
	                onDrop:function(e,source){
	                    $(this).removeClass('over');
	                    if ($(source).hasClass('assigned')){
	                        $(this).append(source);
	                    } else {
	                        var c = $(source).clone().addClass('assigned');
	                        $(this).empty().append(c);
	                        c.draggable({
	                            revert:true
	                        });
	                    }
	                }
	            });
				
			});
		</script>
	</body>
</html>
